<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>my html test -- 菜鸟教程(runoob.com)</title>
</head>

<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
    <div id="header">This is a header</div>

    <p class="text-muted">This is a paragraph.</p>

    <a href="https://www.example.com">Visit Example</a>

    <span style="color: red;">This text is red.</span>
    <br>
    <input type="text" name="username">
    <br>
    <input type="text" value="Default text">
    <br>
    <p><a href="https://www.example.com" target="_blank" rel="noopener">Open in new tab</a></p>

    <input type="password" name="password">
    <p><input type="text" placeholder="Enter your name"></p>

    <h1>这是一个标题。</h1>
    <h2>这是一个标题。</h2>
    <h3>这是一个标题。</h3>

    <img src="images/img1.jpg" width="640" height="320" />

    <p>这是一个段落。</p>
    <hr>
    <p>这是一个段落。</p>
    <hr>
    <p>这是一个段落。</p>

    <!-- 这是一个注释 -->

    <b>加粗文本</b><br><br>
    <strong>strong 加粗文本</strong><br><br>

    <i>斜体文本</i><br><br>
    <em>em 斜体文本</em><br><br>

    <code>电脑自动输出</code><br><br>

    这是 <sub> 下标</sub> 和 <sup> 上标</sup><br /><br />

    <small>这个文本是缩小的</small><br /><br />

    <pre>
        此例演示如何使用 pre 标签
        对空行和    空格 ,  ,    ,  sfa
        进行控制
    </pre>

    <code>计算机输出</code>
    <br />
    <kbd>键盘输入</kbd>
    <br />
    <tt>打字机文本</tt>
    <br />
    <samp>计算机代码样本</samp>
    <br />
    <var>计算机变量</var>
    <br />

    <p>
        <b>注释：</b>这些标签常用于显示计算机/编程代码。
    </p>



    <abbr title="etcetera">etc.</abbr>
    <br />
    <acronym title="World Wide Web">WWW</acronym>

    <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

    <p>仅对于 IE 5 中的 acronym 元素有效。</p>

    <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>


    <p>该段落文字从左到右显示。</p>
    <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

    <h2>引用</h2>
    <p>在这个示例中，第一个和第二个引用使用了 blockquote 标签，因为它们较长，需要独立的块来展示；而第三个引用使用了 q 标签，因为它比较短，可以内联显示。
    </p>
    <blockquote>
        <p>Life is what happens when you're busy making other plans.</p>
        <footer>— John Lennon</footer>
    </blockquote>

    <blockquote>
        <p>If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.</p>
        <footer>— J.K. Rowling, Harry Potter and the Goblet of Fire</footer>
    </blockquote>

    <q>
        <p>If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.</p>
        <footer>— J.K. Rowling, Harry Potter and the Goblet of Fire</footer>
    </q>

    <p>
        In his famous quote, Einstein said: <q>E=mc²</q>
    </p>

    <p>
        <q>by q In his famous quote, Einstein said: <q>E=mc²</q></q>
    </p>


    <p>
        <cite> tag cite, by q In his famous quote, Einstein said: <q>E=mc²</cite>
    </p>

    <p>
        My favorite color is <del>blue</del> <ins>red</ins>
    </p>


    <p>
        <dfn>tag dfn, In his famous quote, Einstein said: <q>E=mc²</q></dfn>
    </p>

</body>

</html>